<template>
  <div
    v-loading="isLoading"
    class="panel-property"
  >
    <div class="content">
      <PanelLabelOverflowTooltip
        ref="panelLabelOverflowTooltip"
        :component-style="form.componentStyle"
      />
      <el-form
        ref="form"
        v-panel-label-overflow-tooltip="getPanelLabelOverflowTooltip()"
        class="prop-form"
        label-position="right"
        :model="form"
        :rules="rules"
        label-width="30%"
      >
        <BaseOption
          :form="form"
          option="tooltipHasLabel"
          :widget-instance-id="widgetInstanceId"
          :config="config"
          type="echart"
        />
        <BaseOption :form="form" option="componentStyle" @change="componentStyleChanged" />
        <BaseOption :form="form" option="color" :config="config" :colorGroup="colorGroupCurrent" />
        <BaseOption :form="form" option="isSingleSerieMultiColor" :label="$demoi18n('panel.label.singleSerieMultiColor')" />
        <!-- 阈值区间 -->
        <VsFormItem :label="$demoi18n('word.threshold')">
          <el-button type="primary" class="btn-sure" size="default" @click="openThreshod">
            {{ $demoi18n('btn.thresholdSetting') }}
          </el-button>
        </VsFormItem>
        <OptionCollapse>
          <el-collapse-item
            :title="$demoi18n('panel.label.titleStyle')"
            name="cssStyle.title"
          >
            <BaseOption
              :form="form"
              option="title"
            />
            <BaseOption
              :form="form"
              option="cssStyle.title"
              :df-css-style-attrs="dfCssStyleAttrs.title"
            />
            <BaseOption :form="form" option="isTitleSignVisiable" />
            <BaseOption v-if="form.isTitleSignVisiable" :form="form" option="signMarginLeft" />
            <BaseOption v-if="form.isTitleSignVisiable" :form="form" option="verticalLineBackgroundColor" />
          </el-collapse-item>
        </OptionCollapse>
        <BaseOption
          :form="form"
          option="echart"
          :echart-conf="getEchartConf()"
        />
      </el-form>

      <ThresholdSetting
        ref="thresholdSetting"
        :form="form"
        :isIcon="false"
        :config="config"
        :doNotShowValueType="true"
        :colorLabel="$demoi18n('label.threshold.columnColor')"
        :showField="true"
        :fieldList="nameListSeries"
        :tip="$demoi18n('label.threshold.tip')"
        @save="handleThresholdSave"
      />
    </div>
    <PanelPropertyBottom :config="config" :widgetInstanceId="widgetInstanceId" :form="form" />
  </div>
</template>
<script>
import OptionCollapse from '@/components/common/base-option/option-collapse/option-collapse.vue';
import PanelLabelOverflowTooltip from '@/components/common/overflow-tooltip/overflow-tooltip.vue';
import ThresholdSetting from '@/components/common/threshold-setting/threshold-setting';
import panelPropertyBase from '@/mixin/panel-property-base.js';
import { $message, numFormat } from '@/utils/util.js';
import { mapState } from 'vuex';
import BaseOption from '../../common/base-option/base-option.vue';
import colorGroup from './colorGroup.js';

export default {
  name: 'PanelProperty',
  components: {
    BaseOption,
    OptionCollapse,
    PanelLabelOverflowTooltip,
    ThresholdSetting,
  },
  mixins: [panelPropertyBase],
  props: ['config', 'widgetInstanceId', 'widget'],
  data() {
    return {
      activeColorRadio: '#2D8CF0', // 单选框选中时的颜色
      colorGroup: colorGroup,
      isLoading: false,
      form: {
        title: '',
        yAxisName: '',
        arrangement: 'parallel',
        barNum: 6,
        padding: {
          left: 50,
          bottom: 40,
        },
        legend: true,
        componentStyle: window._adoPremise.uc.theme,
        size: {
          width: '',
          height: '',
        },
        position: {
          x: '',
          y: '',
        },
        color: 'color1',
      },
      dfCssStyleAttrs: {},
    };
  },
  computed: {
    ...mapState({
      panelApiData: state => state.VisualComponentsModule.panelApiData,
    }),
    nameList() {
      if (!this.panelApiData) {
        return [];
      }
      const arr = this.panelApiData.map(n => {
        if (n.y) {
          n.y = numFormat(n.y, true);
          n.y = n.y.toString();
        }
        return n.y;
      });
      return Array.from(new Set(arr));
    },
    nameListSeries() {
      if (!this.panelApiData) {
        return [];
      }
      const arrSeries = this.panelApiData.map(n => {
        if (n.s) {
          n.s = n.s.toString();
        }
        return n.s;
      });
      return Array.from(new Set(arrSeries));
    },
    colorGroupCurrent() {
      const _colorGroup = {
        light: this.colorGroup.light[`${this.componentName}_${this.form.arrangement}`],
        dark: this.colorGroup.dark[`${this.componentName}_${this.form.arrangement}`],
        real: this.colorGroup.real[`${this.componentName}_${this.form.arrangement}`],
      };
      return _colorGroup;
    },
  },
  created() {
    if (this.config) {
      this.form = JSON.parse(JSON.stringify(this.config.config.property));
    }
    this.dfCssStyleAttrs = this.initDfCssStyleAttrs();
  },
  methods: {
    getPanelLabelOverflowTooltip() {
      return {
        parentComp: this,
      };
    },
    componentStyleChanged(val) {
      this.initColor();
      this.initTitleColor();
    },
    initColor() {
      const keys = Object.keys(
        this.colorGroup[this.form.componentStyle][`${this.componentName}_${this.form.arrangement}`],
      );
      this.form.color = keys[0];
    },
    getEchartConf() {
      return {
        _componentName: 'uniaxial-bar',
        dfVals: this.getEchartDfVals({
          'echart.grid.left': 'padding.left',
          'echart.grid.bottom': 'padding.bottom',
          'echart.grid.right': 'padding.right',
          'echart.xAxis.name': 'xAxisName',
          'echart.yAxis.name': 'yAxisName',
          'echart.xAxis.axisLabel.rotate': 'xLabelRotate',
          'echart.dataZoom.slider.show': 'barShow',
          'echart.series.barWidth': 'barWidth',
          'echart.series._stackName': 'arrangement',
        }),
      };
    },
    checkLimit() {
      const xType = this.form.echart.xAxis.type;
      const yType = this.form.echart.yAxis.type;
      if (xType === yType || (xType !== 'value' && yType !== 'value')) {
        $message({
          type: 'error',
          message: this.$demoi18n('uniaxial-bar.xyType.error'),
        });

        return false;
      }
      return true;
    },
    openThreshod() {
      if (this.$refs.thresholdSetting) {
        this.$refs.thresholdSetting.openDialog();
      }
    },
    handleThresholdSave(thresholdForm) {
      const { isThreshold, thresholdData, thresholdDataType } = thresholdForm;
      this.form = {
        ...this.form,
        isThreshold,
        threshold: thresholdData,
        thresholdDataType,
      };
    },
  },
};
</script>

<style lang="less" scoped>
@import '../../common/less/panel-property.less';
</style>
<style lang="less" scoped>
.panel-property {
  .content {
    .prop-form {
      padding: 0 10px;

      .slider-number-left {
        vertical-align: text-bottom;
        padding-right: 20px;
      }
      .slider-number-right {
        vertical-align: text-bottom;
        padding-left: 20px;
      }

      :deep(.el-slider) {
        display: inline-block;
        width: 120px;
      }

      :deep(.el-form-item) {
        margin-bottom: 0;
      }
      .input-number {
        width: 80px;
        :deep(.el-input-number__decrease) {
          width: 19px;
          background-color: #fff;
        }
        :deep(.el-input-number__increase) {
          width: 19px;
          background-color: #fff;
        }
        :deep(.el-input__inner) {
          padding-left: 19px;
          padding-right: 19px;
        }
      }
      .input-number-left {
        margin-right: 25px;
      }

      .color-radio-group {
        background-color: #eeeeee;
        :deep(.el-radio-button__inner) {
          display: inline-block;
          padding: 2px 2px;
          border: 0;
          border-radius: 0;
          height: 24px;
          margin: 2px 2px;
          background: #eeeeee;
        }
        :deep(.is-active) {
          .el-radio-button__inner {
            background-color: #409eff;
          }
        }
      }
    }
  }
}
</style>
